<!DOCTYPE html>
<html>
    <head>
        <title>Polyline</title>
        <meta charset="UTF-8">   
        <style>
            html, body {
                padding: 0px;
                margin: 0px;                
            }            
            .main {
                margin: 0px;
                padding: 0px;
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
            }
        </style> 
        <script src="../../../../lib/core/ht.js"></script>  
        <script src="../../../../lib/plugin/ht-xeditinteractor.js"></script>   
        <script>                
                                     
            ht.Default.setImage('brick1', '');
            ht.Default.setImage('brick2', '');           
            
            function init(){                                 
                dataModel = new ht.DataModel();                
                
                g3d = new ht.graph3d.Graph3dView(dataModel);                                                  
                g2d = new ht.graph.GraphView(dataModel);                   
                mainSplit = new ht.widget.SplitView(g3d, g2d, 'v', 0.5);   
                
                view = mainSplit.getView();  
                view.className = 'main';
                document.body.appendChild(view);    
                window.addEventListener('resize', function (e) {
                    mainSplit.invalidate();
                }, false);                         
              
                g3d.setGridVisible(true); 
                g3d.setEye(0, 400, 400); 
                g3d.setCenter(0, 0, -100); 
                g3d.setDashDisabled(false); 
                g3d.enableToolTip();
                g3d.getToolTip = function(e){
                    var data = this.getDataAt(e);
                    if(data){
                        return '<pre>' + JSON.stringify(data.getStyleMap(), function(key, value){
                            if(value && value.length > 0 && typeof value[0] === 'number'){
                                var v = [];
                                for(var i=0; i<value.length; i++){
                                    v[i] = parseFloat(value[i].toFixed(2));
                                }                                
                                return '[' + v.join(',') + ']';
                            }
                            return value;
                        }, 4) + '</pre>';
                    }
                    return null;
                };                
                
                g2d.translate(400, 220);      
                g2d.setZoom(0.4, true);
                g2d.setEditable(true); 
                
                g2d.setRightTopHelpers(['tall', 'elevation']);
                g2d.setHelperEditableFunc(function(data, helper) {  
                    return helper === 'tall' || helper === 'elevation' || helper === 'pointElevation';                    
                });
                
                polyline1 = new ht.Polyline();
                dataModel.add(polyline1);                   
                polyline1.setPoints([
                    {x: 200, y: 50},
                    {x: 400, y: 50},
                    {x: 500, y: 200},
                    {x: 100, y: 200}
                ]); 
                polyline1.translate(-100, -140);                
                polyline1.setThickness(40);
                polyline1.s({
                    'shape3d': 'cylinder',
                    'shape.border.width': 20,
                    'shape.border.color': '#9E9E9E',
                    'shape.background': null,
                    'shape3d.top.cap': 'flat',                    
                    'shape3d.bottom.cap': 'flat',
                    'shape3d.top.image': 'brick1',
                    'shape3d.bottom.color': 'yellow',   
                    'shape3d.image': 'brick2',
                    'shape3d.uv.scale': [1, 5],                    
                    'repeat.uv.length': 32,
                    'shape3d.side': 3
                });                 
                
                polyline2 = new ht.Polyline();
                dataModel.add(polyline2);                   
                polyline2.setPoints([
                    {x: 96, y: 209}, 
                    {x: 43, y: 211}, 
                    {x: -1, y: 199}, 
                    {x: 7, y: 126},
                    {x: 54, y: 127}, 
                    {x: 41, y: 89}, 
                    {x: 98, y: 60}, 
                    {x: 114, y: 95},
                    {x: 159, y: -3}, 
                    {x: 290, y: 66}, 
                    {x: 251, y: 137}, 
                    {x: 296, y: 155},
                    {x: 289, y: 199}, 
                    {x: 260, y: 213}, 
                    {x: 149, y: 213}, 
                    {x: 77, y: 261}
                ]);                 
                polyline2.setSegments([1, 2, 4, 4, 4, 4, 2, 2]);
                polyline2.translate(-400, -140);
                polyline2.setThickness(30);
                polyline2.s({
                    'shape3d': 'cylinder',
                    'shape3d.resolution': 30,
                    'shape3d.color': '#E74C3C',
                    'shape3d.bottom.cap': 'round',
                    'shape.border.width': 10, 
                    'shape.border.color': '#E74C3C',
                    'shape.background': null,
                    'shape3d.side': 4,
                    'shape3d.start.angle': Math.PI/4
                });  
    
                polyline3 = new ht.Polyline();
                dataModel.add(polyline3);                   
                polyline3.setPoints([
                    {x: -500, y: 0, e: 0},
                    {x: -300, y: -250, e: 200},
                    {x: 300, y: 250, e: 200},                    
                    {x: 500, y: 0, e: 0}                    
                ]); 
                polyline3.setSegments([1, 4]);                
                polyline3.setThickness(60);
                polyline3.s({
                    'shape.background': null,
                    'shape3d': 'cylinder',   
                    'shape3d.resolution': 50,
                    'shape3d.side': 30,
                    'shape3d.reverse.color': 'yellow',                       
                    'shape3d.top.cap': 'round',
                    'shape.border.width': 10,
                    'shape3d.image': 'brick1',
                    'shape3d.uv.scale': [1, 6],
                    'repeat.uv.length': 32
                }); 
                dataModel.sm().ss(polyline3);
                
                polyline4 = new ht.Polyline();                         
                polyline4.setPoints([
                    {x: -500, y: 100, e: 0},
                    {x: -300, y: -150, e: 200},
                    {x: 300, y: 350, e: 200},                    
                    {x: 500, y: 100, e: 0}                    
                ]); 
                polyline4.setSegments([1, 4]);  
                polyline4.setThickness(20);
                polyline4.s({
                    'shape.background': null,  
                    'shape.border.width': 10,
                    'shape.border.color': 'green',
                    'shape.border.gradient.color': 'yellow',
                    'shape.border.pattern': [20, 10],
                    'shape3d.resolution': 50                    
                }); 
                dataModel.add(polyline4);   
                
                polyline5 = new ht.Polyline();                         
                polyline5.setPoints([
                    {x: -500, y: 100+40, e: 0},
                    {x: -300, y: -150+40, e: 200},
                    {x: 300, y: 350+40, e: 200},                    
                    {x: 500, y: 100+40, e: 0}                    
                ]); 
                polyline5.setSegments([1, 4]);  
                polyline5.setThickness(20);
                polyline5.s({
                    'shape.background': null,  
                    'shape.border.width': 10,
                    'shape.border.color': 'red',
                    'shape.dash': true,
                    'shape.dash.color': 'yellow',
                    'shape.dash.pattern': [30, 15],
                    'shape3d.resolution': 50                    
                }); 
                dataModel.add(polyline5);
    
                node1 = new ht.Node();
                dataModel.add(node1);
                node1.p3(-400, 0, -300);
                node1.s3(50, 80, 50);
                node1.s({
                    'shape3d': 'cylinder',
                    'shape3d.transparent': true,
                    'shape3d.opacity': 0.8,
                    'shape3d.reverse.cull': true
                });
                
                node2 = new ht.Node();
                dataModel.add(node2);
                node2.p3(400, 100, -300);
                node2.s3(50, 80, 50);
                node2.s({
                    'shape3d': 'cylinder',
                    'shape3d.transparent': true,
                    'shape3d.opacity': 0.8,
                    'shape3d.reverse.cull': true
                });
                
                for(var i=0; i<4; i++){
                    var edge = new ht.Edge(node1, node2);
                    dataModel.add(edge);
                    edge.s({
                        'edge.center': true,
                        'edge.offset': 50,
                        'edge.gap': 60,
                        'label': 'Edge-' + i,
                        'label.background': 'yellow',
                        'label.position': 3                        
                    });
                    if(i > 1){
                        edge.s({
                            'shape3d': 'cylinder',
                            'shape3d.color': '#E74C3C',
                            'edge.width': 15,
                            'edge.color': '#E74C3C',
                            'label.t3': [0, 8, 0],
                            'label.scale': 2
                        });
                    }else{
                        edge.s({
                            'edge.width': 5,                                                       
                            'label.t3': [0, 2, 0],
                            'label.scale': 2
                        }); 
                        if(i === 0){
                            edge.s({
                                'edge.pattern': [20, 10],
                                'edge.color': 'green', 
                                'edge.gradient.color': 'yellow'
                            });
                        }else{
                            edge.s({
                                'edge.dash': true,    
                                'edge.color': 'red', 
                                'edge.dash.color': 'yellow',
                                'edge.dash.pattern': [30, 15]
                            });
                        }
                    }
                }
                
                for(var i=0; i<2; i++){
                    edge = new ht.Edge(node1, node1);
                    dataModel.add(edge);
                    edge.s({
                        'shape3d': 'cylinder',
                        'shape3d.color': 'yellow',
                        'edge.width': 10,
                        'edge.gap': 20,
                        'edge.color': 'yellow'                        
                    });
                } 
                for(var i=0; i<2; i++){
                    edge = new ht.Edge(node2, node2);
                    dataModel.add(edge);
                    edge.s({                        
                        'edge.width': 3,
                        'edge.gap': 20,
                        'edge.color': 'green',
                        'edge.gradient.color': 'yellow'
                    });
                } 
                edge = new ht.Edge(node1, node2);
                dataModel.add(edge);
                edge.s({
                    'shape3d': 'cylinder',
                    'shape3d.color': '#72C7FF',
                    'shape3d.resolution': 50,
                    'shape3d.top.cap': 'round',
                    'shape3d.bottom.cap': 'round',
                    'edge.width': 12,
                    'edge.gap': 20,
                    'edge.color': '#72C7FF',
                    'edge.type': 'points',
                    'edge.points': [                        
                        {x: -300, y: -400, e: -200},
                        {x: 300, y: -200, e: -100}                                          
                    ],
                    'edge.segments': [1, 4]
                });
            }             
            
        </script>
    </head>
    <body onload="init();">                                
    </body>
</html>
